<template>
    <div class="wrapper">

        <go-back bg="bg" title="讲师详情"></go-back>
        <teacher-cont :listData="listData" @attenFun="attenFun"></teacher-cont>
        <div style="height:80px;width:100%"></div>
        <!-- <van-tabs v-model="activeName" @click="onClick">
            <van-tab title="讲师介绍" name="a">

            </van-tab>
            <van-tab title="主讲课程" name="b">

            </van-tab>
            <van-tab title="学员评价" name="c">
                <div style="width:100%;text-align:center">
                    <img style="width:150px;height:150px" src="https://wap.365msmk.com/img/empty.0d284c2e.png" alt="">
                    <p style="color:#999;font-size:16px">暂无评论</p>
                </div>
            </van-tab>
        </van-tabs> -->
        <teacher-tabs :dataList="tabs" @on-change="getChangeVal">
            <div v-for="(item, index) in tabs" :key="index" :class="currentTab === item.value ? 'show' : 'hidden'">
                {{ item.name }}
            </div>
        </teacher-tabs>

        <van-button style="position: fixed;bottom:0" size="large" type="primary">立即预约</van-button>
    </div>
</template>
  
<script>
import { getUserPort, getUserInfoPort, getAttenPort, getCoursePort } from '@/api/index'
import goBack from '@/components/go-back.vue'
import teacherCont from '@/components/teacher-cont.vue'
import teacherTabs from '@/components/teacher-tabs.vue'
export default {
    data() {
        return {
            activeName: 'a',
            listData: [],
            listDataInfo: { attr: [{ attr_value: [{ attr_value_name: '' }], attr_name: '' }, { attr_value: [{ attr_value_name: '' }], attr_name: '' }] },
            limit: 10,
            page: 1,
            courseData: [],
            tabs: [
                { name: '讲师介绍', value: 0 },
                { name: '主讲课程', value: 1 },
                { name: '讲师评价', value: 2 },
            ],
            currentTab: 0,
        }
    },
    computed: {},
    created() { this.gettUser() },
    mounted() { },
    watch: {},
    methods: {
        //   获取数据
        async gettUser() {
            let id = this.$route.query.id
            console.log(id);
            let res = await getUserPort(id)
            console.log(res)
            if (res.code == 200) {
                this.listData = res.data
            }

            let data = await getUserInfoPort(id)
            console.log(data)
            if (data.code == 200) {
                this.listDataInfo = data.data
            }
        },
        //关注/取消关注
        async attenFun(iid) {
            let res = await getAttenPort(iid)
            console.log(res);
            this.gettUser()
        },
        getChangeVal(val) {
            console.log(val);
            this.currentTab = val.value;
        },

        // 点击切换tab事件
        onClick(name, title) {
            console.log(name)
            if (name == 'b') {
                this.gettCourse()
            }
        },
        // 获取主讲课程数据
        async gettCourse() {
            let id = this.$route.query.id
            let res = await getCoursePort(this.limit, this.page, id)
            console.log(res)
            if (res.code == 200) {
                this.courseData = res.data
            }
        }
    },
    components: {
        goBack,
        teacherCont,
        teacherTabs
    }
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    position: relative;
    background: #f4f4f4;
    box-sizing: border-box;

    .van-tab__pane {
        padding: 0 15px;
    }

    .van-tab {
        font-size: 28px;
    }

    .jx {
        width: 345px;
        height: 50px;
        // margin-top: 10px;
        line-height: 50px;
        display: flex;

        span {
            width: 52px;
            display: inline-block;
        }
    }

    .show {
        display: block;
    }

    .hidden {
        display: none;
    }
}
</style>
  